<template>
  <div class="login">
    <div class="main">
      <div class="first">
        <div class="title">
          手机膜后台管理
        </div>
        <div class="triangle"></div>
      </div>
      <div class="second">
        <el-input v-model="user.loginName" placeholder="请输入手机号码"></el-input>
      </div>
      <div class="third">
        <el-input v-model="user.password" placeholder="请输入密码" show-password @keyup.enter.native="login"></el-input>
      </div>
      <div class="forth">
        <el-button type="primary" @click="login" >登录</el-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      user:{
        loginName:'',//手机号
        password:'',//密码
      }
      
      
    }
  },
  methods:{
    login(){
      let _this = this;
      if(_this.user.loginName == ''){
        _this.$message('账号不能为空');
        return
      }
      if(_this.user.password == ''){
        _this.$message('密码不能为空');
        return
      }
      let api = '/api/admin/manager/login?loginName='+_this.user.loginName+'&password='+_this.user.password;
      // //console.log(_this.user);
      // _this.user = _this.qs.stringify(_this.user);
      _this.axios.post(api,_this.user).then(res=>{
        //console.log('登录返回',res);
        if(res.data.code == 200){
          let data = {};
          data.id = res.data.data.bussData;//用户账号名
          
          _this.$store.dispatch('isLogin',data);//缓存登录状态 
          _this.$router.push({
            path:'/home'
          });
        }else{
          _this.$message('账号或者密码错误，请重新输入');
          _this.user.loginName = '';
          _this.user.password = '';
        }
      });
    }
  }
}
</script>

<style scoped>
/* 整体样式 */
.login{
  height: 100%;
  width: 100%;
  position: relative;
}
/* 主体部分 */
.login>>>.main{
  width: 27%;
  height: 50%;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:.0625rem solid rgba(219, 215, 219, 1);

}
/* 登录标题 */
.login>>>.first{
  width: 95.3%;
  position: absolute;
  top: 7%;
  left: -5%;
  background-color: rgba(0, 153, 255, 1);
  color: rgba(255, 255, 255, 1);
  line-height: 3.8;
  font-size: .8125rem;
}
.login>>>.first .title{
  margin-left: 14%;
}
/* 三角形 */
.login>>>.triangle{
  width: 0;
  height: 0;
  border-top: 1.1875rem solid rgba(106, 122, 153, 1);
  border-left: 1.1875rem  solid transparent;
  position: absolute;
  top: 99%;

}
.login>>>.second{
  width: 100%;
  position: absolute;
  top: 28%;
  /* left: 5%; */
  text-align: center;
  
}
.login>>>.third{
  width: 100%;
  position: absolute;
  top: 48%;
  /* left: 5%;   */
  text-align: center;
  
}
.login>>>.second .el-input,.third .el-input{
   width: 80%;
}
.login>>>.forth{
  width: 100%;
  position: absolute;
  top: 68%;
  /* left: 5%; */
  text-align: center;
  
}
.login>>>.forth button{
  width: 80%;
  
  
}
</style>
